<script>
import { mapState } from "vuex";
import ImagePreview from "@/components/ImagePreview/index.vue";
import Message from "@/components/ChatBox/Message.vue";

export default {
  name: "Message",
  components: {
    ImagePreview,
    Message,
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapState(["isDev", "qtApi"]),
    content() {
      return this.item.content;
    },
    isKnown() {
      return this.item.known;
    },
    isSend() {
      return !this.item.receive;
    },
  },
  methods: {
    handlePlay() {
      if (this.qtApi) {
        this.qtApi.mediaPlayerFile(this.content);
      }
    },
    setClass(type) {
      const map = {
        transfer: "transfer money",
        redPacket: "hongbao money",
        groupTransfer: "group money",
        card: "personalCard",
        location: "map",
        transferMessage: "chat",
      };
      return map[type] || type;
    },

    setAvatar() {
      if (this.isSend) {
        return require("@/static/icon/icon_head_send.png");
      } else if (this.isKnown) {
        return require("@/static/icon/icon_head_known.png");
      } else {
        return require("@/static/icon/icon_head_unknown.png");
      }
    },
  },
};
</script>

<template>
  <div :class="[isSend ? 'right' : 'left']" class="message-box">
    <!-- 头像 -->
    <ImagePreview
      :defaultSrc="setAvatar()"
      :imageStyle="{ width: '30px', height: '30px' }"
      :src="item.avatar"
      class="avatar"
    ></ImagePreview>
    <!--内容窗体-->
    <div class="message-dialog">
      <div class="message-time">
        <!-- 发送方或接收方的名字 -->
        <span class="name">{{ item.userName }}{{item.userCode?`(${item.userCode})`:''}}</span>
        <!-- 发送或者接收的时间 -->
        <span class="time">{{ item.time }}</span>
      </div>
      <!--图片-->
      <div v-if="item.type === 'image'" class="message-image">
        <ImagePreview :src="content" />
      </div>
      <!--群发消息-->
      <div
        v-else-if="item.type === 'transferMessage'"
        class="message-content-chat"
      >
        <div class="chat-title second-border-color hover-tooltip-text">
          <div class="chat-text ellipsis-text-1">
            {{ content.title }}
          </div>
          <div class="tooltip">{{ content.title }}</div>
        </div>
        <div class="chat-content">
          <ul>
            <li v-for="(msgItem, msgIndex) in content.value">
              <Message :key="msgIndex" :item="msgItem"></Message>
            </li>
          </ul>
        </div>
      </div>
      <!--视频-->
      <div
        v-else-if="item.type === 'video'"
        :class="[
          { unknown: !isKnown, send: isSend },
          setClass(item.type)
        ]"
        class="audio_border message-content audio"
        @click="handlePlay(item)"
      >
        <div class="aa_class message-midea">
          <img
            :src="
              isKnown
                ? require(`@/static/icon/icon_video_known.png`)
                : require(`@/static/icon/icon_video_unknown.png`)
            "
          />
        </div>
      </div>
      <!--语音-->
      <div
        v-else-if="item.type === 'audio'"
        :class="[
          { unknown: !isKnown, send: isSend },
          setClass(item.type)
        ]"
        class="audio_border message-content audio"
        @click="handlePlay(item)"
      >
        <div class="aa_class message-midea">
          <img
            :src="
              isKnown
                ? require(`@/static/icon/icon_voice_known.png`)
                : require(`@/static/icon/icon_voice_unknown.png`)
            "
          />
        </div>
      </div>
      <!-- 此处如果是 未知则显示unknown的类名 已知则显示known的类名 发送方send-->
      <div
        v-else
        :class="[{ unknown: !isKnown, send: isSend }, setClass(item.type)]"
        class="message-content"
      >
        <span v-if="item.type === 'message'" class="primary-text primary-size">
          {{ typeof content === "string" ? content : JSON.stringify(content) }}
        </span>

        <!--个人名片-->
        <template v-if="item.type === 'card'">
          <div class="personalCard-head primary-border-color">
            <ImagePreview
              :defaultSrc="require('@/static/icon/icon_card-head_default.png')"
              :imageStyle="{ width: '44px', height: '44px' }"
              :src="content.avatar"
              class="personalCard-img"
            ></ImagePreview>
            <div class="personalCard-name hover-tooltip-text">
              <div class="ellipsis-text-1 primary-text">
                {{ content.userName }}
              </div>
              <div class="tooltip">{{ content.userName }}</div>
            </div>
          </div>
          <div class="personalCard-footer hover-tooltip-text">
            <div class="ellipsis-text-1 second-text">
              账号:{{ content.accountName }}
            </div>
            <div class="tooltip">{{ content.accountName }}</div>
          </div>
        </template>
        <!--群收款-->
        <template v-if="item.type === 'groupTransfer'">
          <div
            class="hongbao-head group-head money-head white-text second-size"
          >
            <img
              :src="require('../../static/icon/icon_group-collection.png')"
              alt=""
            />
            <div class="group-content">
              <div class="white-text second-size">活动收款</div>
              <div class="white-text primary-size">你无需支付</div>
            </div>
          </div>
          <div class="money-footer grey-text">群收款</div>
        </template>
        <!--红包-->
        <template v-if="item.type === 'redPacket'">
          <div class="hongbao-head white-text money-head second-size">
            <img :src="require('../../static/icon/iocn_red-envelope.png')" />
            {{ content.value }}
          </div>
          <div class="hongbao-footer money-footer grey-text">红包</div>
        </template>
        <!--文件-->
        <template v-if="item.type === 'file'">
          <img
            :src="require('../../static/icon/icon_file.png')"
            class="file-img"
          />
          <div class="file-content">
            <div v-if="content.value" class="file-name hover-tooltip-text">
              <div class="file-text ellipsis-text-1 primary-size primary-text">
                {{ content.value }}
              </div>
              <div class="tooltip">{{ content.value }}</div>
            </div>
            <div class="file-size primary-size second-text">
              {{ content.size }}
            </div>
          </div>
        </template>
        <!-- 网页信息-->
        <template v-if="item.type === 'web'">
          <div class="web-title hover-tooltip-text">
            <template v-if="content.title">
              <div class="web-text ellipsis-text-1 primary-text">
                {{ content.title }}
              </div>
              <div class="tooltip">{{ content.title }}</div>
            </template>
          </div>
          <div class="web-content">
            <div class="web-content--text second-text hover-tooltip-text">
              <template v-if="content.value">
                <div class="ellipsis-text-3">
                  {{ content.value }}
                </div>
                <div class="tooltip">{{ content.value }}</div>
              </template>
            </div>
            <!-- 资源地址 -->
            <img
              :src="require('../../static/icon/icon_website.png')"
              class="web-img"
            />
          </div>
          <div class="web-url primary-border-color hover-tooltip-text">
            <template v-if="content.url">
              <div class="ellipsis-text-1 second-text">
                {{ content.url }}
              </div>
              <div class="tooltip">
                {{ content.url }}
              </div>
            </template>
          </div>
        </template>
        <!--转账-->
        <template v-if="item.type === 'transfer'">
          <div
            class="hongbao-head transfer-head money-head white-text second-size"
          >
            <img
              :src="require('../../static/icon/icon_group-collection.png')"
            />
            <div class="transfer-content">
              <div class="white-text second-size">
                {{ content.value || "" }}
              </div>
              <div class="white-text primary-size">
                {{ content.no && `转账单号：${content.no}` }}
              </div>
            </div>
          </div>
          <div class="money-footer grey-text">转账</div>
        </template>
        <!--定位-->
        <template v-if="item.type === 'location'">
          <!-- 位置 -->
          <div class="map-title primary-text">[位置]</div>
          <!-- 描述 -->
          <div class="map-desc second-text">
            地点:{{content.area}}
            <br />
            地址:{{content.location}}
            <br />
            经度:{{content.lat}}
            <br />
            纬度:{{content.lot}}
            <br />
            精确度:{{content.accuracy}}
            <br />
          </div>
          <!-- 位置图片 -->
          <img
            :src="require('../../static/icon/img_map.png')"
            class="map-img"
          />
        </template>
      </div>
      <div
        v-if="item.type === 'file' && !content.isDownload"
        class="message-status"
      >
        未下载
      </div>
      <!-- 下方的状态 -->
      <div v-else-if="item.isDelete" class="message-status">已删除</div>
      <template v-if="isDev">
        {{ item.type }}
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
